<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head>
    <meta charset="utf-8">
    
    <?php 
    require_once './lectura2.php';
    $rand = new lectura2();
    $rawdata = $rand->getAllInfo();
    $valoresArray;
    $timeArray;
    
    for($i = 0 ;$i<count($rawdata);$i++){
    $valoresArray[$i]= $rawdata[$i][1];
    //OBTENEMOS EL TIMESTAMP
    $time= $rawdata[$i][0];
  $date = new DateTime($time);
    //ALMACENAMOS EL TIMESTAMP EN EL ARRAY
   $timeArray[$i] = $date->getTimestamp()*1000;
    }
    ?>
    
    <?php 
    require_once './lectura1.php';
    $rand2 = new lectura1();
    $rawdata2 = $rand2->getAllInfo2();
    $valoresArray2;
    $timeArray2;
    
    for($i = 0 ;$i<count($rawdata2);$i++){
    $valoresArray2[$i]= $rawdata2[$i][1];
    //OBTENEMOS EL TIMESTAMP
    $time2= $rawdata2[$i][0];
  $date2 = new DateTime($time2);
    //ALMACENAMOS EL TIMESTAMP EN EL ARRAY
   $timeArray2[$i] = $date2->getTimestamp()*1000;
    }
    ?>

    <title>Sistema</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
    <!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script src="script.responsive.js"></script>


<style>.art-content .art-postcontent-0 .layout-item-0 { padding-right: 10px;padding-left: 10px;  }
.ie7 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
.ie6 .art-post .art-layout-cell {border:none !important; padding:0 !important; }

</style></head>
<body>
<div id="art-main">
    <div class="art-sheet clearfix">
<header class="art-header">

    <div class="art-shapes">
        
            </div>

<h1 class="art-headline">
    <a href="#">Sistema de medición de precipitaciones</a>
</h1>
<h2 class="art-slogan">Universidad Nacional del Este - Facultad Politecnica</h2>
              
                    
</header>
<nav class="art-nav">
    <ul class="art-hmenu"><li><a href="index.php" class="active">Inicio</a></li></ul> 
    <ul class="art-hmenu"><li><a href="avanzado.php" class="active">Avanzado</a></li></ul>
    </nav>
<div class="art-layout-wrapper">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                       
                        <div class="art-layout-cell art-content"><article class="art-post art-article">                                  
               
                                <div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
                        
                        <div class="art-content-layout-row">
         
                            <div class="art-layout-cell layout-item-0" style="width: 50%">
                                
 <?php
            require_once './calculos.php';
            $datos4 = new calculos();
            $ultimalect =$datos4->getUltimoValorInsertado();
            $valor = $ultimalect[0];
            echo "La ultima lectura es: $valor mm";
          // echo mysql_result($ultimalect, 0);
        
        ?>
            
    <script src="jquery.js"></script>
    <script src="js_stock/highstock.js"></script>
    <script src="js_charts/highcharts.js"></script>
    <script src="js_stock/modules/exporting.js"></script>
   
    <br>   
          
    </div>
    
      
        <div class="art-layout-cell layout-item" style="width: 50%" id ="contenedor2" >
       <script> chartmediones2 = new Highcharts.Chart({
    chart: {
        renderTo: 'contenedor2'
        //defaultSeriesType: 'spline'
 
    },
    rangeSelector : {
        enabled: false
    },
    title: {
        text: 'Gráfica del Dia'
    },
    xAxis: {
        type: 'datetime'
        //tickPixelInterval: 150,
        //maxZoom: 20 * 1000
    },
    yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
            text: 'Milimetros',
            margin: 10
        }
    },
    series: [{
        name: 'Milimetros',
        data: (function() {
                // generate an array of random data
                var data = [];
                <?php
                    for($i = 0 ;$i<count($rawdata2);$i++){
                ?>
                 data.push([<?php echo $timeArray2[$i];?>,<?php echo $valoresArray2[$i];?>]);
                <?php } ?>
                return data;
            })()
    }],
    credits: {
            enabled: false
    }
});</script> 
       
    </div>
           
    </div>
                        <br><br>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item" style="width: 100%" id="contenedor" >
       <script> chartmediones = new Highcharts.StockChart({
    chart: {
        renderTo: 'contenedor'
        //defaultSeriesType: 'spline'
 
    },      
    rangeSelector : {
        enabled: false
    },
    title: {
        text: 'Gráfica del Mes'
    },
    xAxis: {
        type: 'datetime'
        //tickPixelInterval: 150,
        //maxZoom: 20 * 1000
    },
    yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
            text: 'Milimetros',
            margin: 10
        }
    },
    series: [{
        name: 'Milimetros',
        data: (function() {
                // generate an array of random data
                var data = [];
                <?php
                    for($i = 0 ;$i<count($rawdata);$i++){
                ?>
                 data.push([<?php echo $timeArray[$i];?>,<?php echo $valoresArray[$i];?>]);
                <?php } ?>
                return data;
            })()
    }],
    credits: {
            enabled: false
    }
});</script>   
    </div>
    </div>
</div>
</div>


</article></div>
                    </div>
                </div>
            </div>
<footer class="art-footer">
<p><br></p>
<p>Copyright © 2014. All Rights Reserved.</p>
</footer>

    </div>
</div>


</body></html>